<template>
  <div id="line" class="line">

  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts';
import { lineSetOption } from './lineSetOption'
import { useListStore } from '@/stores/index'
const store = useListStore()




const lineInit = () => {
  const topTen = store.list.localCityNCOVDataList.slice(0, 100)
  const cities = topTen.map((v) => {
    return  v.city

  })
  const num = topTen.map((v) => {
    return  v.local_confirm_add
    
  })
  console.log('cities', cities)
  const lineChart = echarts.init(document.querySelector('#line')!)
  lineChart.setOption(lineSetOption(cities,num))
}

onMounted(async () => {

  await store.getList()
  lineInit()
})
</script>

<style scoped lang="scss">
.line {
  height: 280px;
  margin-top: 5px;
}
</style>